<script src="../axios/axios.js"></script>
<template>
  <div class="bj">
      <div class="login">
        <el-avatar
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2659107992,1608740292&fm=26&gp=0.jpg"
            class="loginAvatar">
        </el-avatar>
<!--        少表单验证 验证码-->

<!--        社区管理员登入-->
        <el-form ref="form" :model="loginFrm" label-width="80px" :rules="rules" class="loginFrm" v-show="dlshow">

          <el-form-item label="名称" class="suerInpt" prop="userName">
            <el-input v-model="loginFrm.userName" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <el-form-item label="密码" class="suerInpt">
            <el-input v-model="loginFrm.userPassword" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>

          <div class="inptButton">
          <el-button type="primary" @click="login">登入</el-button>

          </div>
          <div class="acss">
            <a @click="password">店铺登入</a>
            <a @click="enroll" style="float: right">注册社区账户</a>
          </div>

        </el-form>
<!--        社区注册-->
        <el-form ref="form" :model="loginFrm" label-width="80px" :rules="rules" class="loginFrm" v-show="zcshow">

          <el-form-item label="名称" class="suerInpt">
            <el-input v-model="loginFrm.zuserName" prefix-icon="el-icon-user-solid" ></el-input>
          </el-form-item>
          <el-form-item label="密码" class="suerInpt">
            <el-input v-model="loginFrm.zuserPassword" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>

          <div class="inptButton">
            <el-button type="primary" @click="enrolls">注册</el-button>
          </div>
          <div class="acss">
            <a @click="password">店铺登入</a>
            <a @click="loginye" style="float: right">社区登入</a>
          </div>
        </el-form>
        <!--        店铺登入-->
        <el-form ref="form" :model="storeLogin" label-width="80px" :rules="rules" class="loginFrm" v-show="udlshow">

          <el-form-item label="手机" class="suerInpt">
            <el-input v-model="storeLogin.mobile" prefix-icon="el-icon-user-solid" ></el-input>
          </el-form-item>
          <el-form-item label="密码" class="suerInpt">
            <el-input v-model="storeLogin.password" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>

          <div class="inptButton">
            <el-button type="primary" @click="uenrolls">登入</el-button>
          </div>
          <div class="acss">
            <a @click="loginye" style="float: left">社区登入</a>
            <a @click="enroll" style="float: right">注册社区账户</a>
          </div>
        </el-form>

      </div>
  </div>
</template>

<script>
import as from "@/axios/axios";
export default {
  name: "Login",
  data(){
    return{
      dlshow:true,
      udlshow:false,
      zcshow:false,

      loginFrm:{
        userName:"",
        userPassword:"",
        zuserName:"",
        zuserPassword:"",
      },
      storeLogin:{

      },
      rules:{
        userName: [
          // { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, message: '用户名过短', trigger: 'blur' },
          { max: 12, message: '用户名过长', trigger: 'blur' },
        ],
        userPassword:[
          // { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码过短', trigger: 'blur' },
          { max: 12, message: '密码过长', trigger: 'blur' },

        ]
      }
    }
  },
  methods:{
    //社区登入
    login(){
      let th = this
      as.post("manager/login",
          {name:this.loginFrm.userName,password:this.loginFrm.userPassword}).
      then(function (response) {

        console.log(response);

        if(response.data.message == "登入成功"){
          localStorage.setItem("token",response.data.data.token)
          localStorage.setItem("name",response.data.data.name)
          th.$router.push('/home/img')
        }else {
          th.$message.error(response.data.message);
        }
      })
          .catch(function (error) {
            th.$message.error("登入失败");
            console.log(error);
          });
    },
    //店铺登入
    uenrolls(){
      as.post("/store/storeLogin",{mobile:this.storeLogin.mobile,password:this.storeLogin.password}).
      then((res)=>{
        localStorage.setItem("token",res.data.data.token)
        localStorage.setItem("storeName",res.data.data.storeName)
        localStorage.setItem("storeId",res.data.data.storeId)
        this.$router.push('/store/details')
      }).catch((error)=>{
        this.$message.error("登入失败");
      })
    },
    //注册
    enrolls(){
      let th = this
      as.post("manager/register",
          {name:this.loginFrm.zuserName,
            password:this.loginFrm.zuserPassword}).
      then(function (response) {
        if(response.data.message == "注册成功 请登入"){

          th.$message({
            message: response.data.message,
            type: 'success'
          });
          th.loginye()
        }else {
          th.$message.error(response.data.message);
        }
        console.log(response);


      })
          .catch(function (error) {

            console.log(error);
          });

    },



    password(){
      this.dlshow=false
      this.zcshow=false
      this.udlshow=true
      this.loginFrm.userName=""
      this.loginFrm.userPassword=""
      this.loginFrm.zuserName=""
      this.loginFrm.zuserPassword=""
    },

    enroll(){
      this.loginFrm.userName=""
      this.loginFrm.userPassword=""
      this.storeLogin = {}
      this.dlshow=false
      this.udlshow = false
      this.zcshow=true
    },
    loginye(){
      this.loginFrm.zuserName=""
      this.loginFrm.zuserPassword=""
      this.storeLogin = {}
      this.zcshow=false
      this.udlshow = false
      this.dlshow=true
    },





  }
}
</script>

<style scoped lang="less">
  .bj{
    height: 100%;
    background-image: url("https://sgls.oss-cn-beijing.aliyuncs.com/images/401.jpg");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
    .login{
      height: 400px;
      width: 500px;
      background-color: rgba(222, 222, 222, 0.8);
      box-shadow:4px 4px 5px #999;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border-radius: 20px;
      .loginAvatar{
        width: 180px;
        height: 180px;
        position: relative;
        left: 50%;
        transform: translate(-50%,-50%);
        box-shadow:4px 4px 5px #999;
      }
      .loginFrm{
        margin-top: -35px;
      }
      .suerInpt{
        width: 85%;
        margin-bottom: 30px;
      }
      .inptButton{
        text-align: center;
        button{
          height: 50px;
          width: 160px;
        }
      }
      .acss{
        color: #475ac4;
        margin-top: 15px;
        margin-left: 20px;
        margin-right: 20px;
        a:hover{
          color: blue;
          cursor:pointer
        }

      }
    }

  }


</style>